<template>
  <div class="box">
    <el-descriptions
      class="margin-top"
      title="基本信息"
      :column="2"
      border
      style="margin: 0 70px"
    >
      <template slot="extra">
        <el-button type="primary" size="small" @click="goBack()"
          >&lt;&lt;&nbsp;返回</el-button
        >
      </template>
      <el-descriptions-item
        label="试卷分类信息"
        label-class-name="my-label"
        content-class-name="my-content"
        >{{ this.data.fid }}/{{ this.data.papercategory }}</el-descriptions-item
      >
      <el-descriptions-item
        label="试卷名称"
        label-class-name="my-label"
        content-class-name="my-content"
        >{{ this.data.name }}</el-descriptions-item
      >
      <el-descriptions-item
        label="试卷类型"
        label-class-name="my-label"
        content-class-name="my-content"
        >{{ this.data.type }}</el-descriptions-item
      >
      <el-descriptions-item
        label="试卷难度"
        label-class-name="my-label"
        content-class-name="my-content"
      >
        {{ this.data.difficulty }}
      </el-descriptions-item>
    </el-descriptions>

    <div class="main">
      <header>试题信息</header>
      <div v-if="this.options.qu1">
        <span>单选题</span>
        <el-card
          class="box-card"
          v-for="(item, index) in data.paperObjects"
          v-if="item.quTypeId == 1"
          :key="item.id"
        >
          <div slot="header" class="clearfix">
            <span>{{ item.papercontent }}</span
            >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;答案：<span
              >{{ item.answer }}</span
            >
          </div>
          <div
            v-for="(i, index) in item.answerList"
            :key="index"
            class="text item"
          >
            {{ i.options }}&nbsp;&nbsp;{{ i.optionContent }}
          </div>
        </el-card>
      </div>
      <div v-if="this.options.qu2">
        <span>多选题</span>
        <el-card
          class="box-card"
          v-for="(item, index) in data.paperObjects"
          v-if="item.quTypeId == 2"
          :key="item.id"
        >
          <div slot="header" class="clearfix">
            <span>{{ item.papercontent }}</span
            >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;答案：<span
              >{{ item.answer }}</span
            >
          </div>
          <div
            v-for="(i, index) in item.answerList"
            :key="index"
            class="text item"
          >
            {{ i.options }}&nbsp;&nbsp;{{ i.optionContent }}
          </div>
        </el-card>
      </div>
      <div v-if="this.options.qu3">
        <span>判断题</span>
        <el-card
          class="box-card"
          v-for="(item, index) in data.paperObjects"
          v-if="item.quTypeId == 3"
          :key="item.id"
        >
          <div slot="header" class="clearfix">
            <span>{{ item.papercontent }}</span>
          </div>
          <div class="text item">
            答案：<span>{{ item.answer }}</span>
          </div>
        </el-card>
      </div>
      <div v-if="this.options.qu4">
        <span>填空题</span>
        <el-card
          class="box-card"
          v-for="(item, index) in data.paperObjects"
          v-if="item.quTypeId == 4"
          :key="item.id"
        >
          <div slot="header" class="clearfix">
            <span>{{ item.papercontent }}</span>
          </div>
          <div class="text item">
            答案：<span>{{ item.answer }}</span>
          </div>
        </el-card>
      </div>
      <div v-if="this.options.qu5">
        <span>问答题</span>
        <el-card
          class="box-card"
          v-for="(item, index) in data.paperObjects"
          v-if="item.quTypeId == 5"
          :key="item.id"
        >
          <div slot="header" class="clearfix">
            <span>{{ item.papercontent }}</span>
          </div>
          <div class="text item">
            答案：<span>{{ item.answer }}</span>
          </div>
        </el-card>
      </div>
      <div v-if="this.options.flag">暂无试题</div>
    </div>
  </div>
</template>
<style>
.main .el-card {
  margin: 20px 0;
}
.main header {
  color: #303133;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 30px;
}
.main {
  margin: 30px 70px 0;
}
.el-descriptions-item__label.is-bordered-label.my-label {
  width: 150px;
  color: #999;
  text-align: center;
}
.my-content {
  width: 600px;
}
</style>
<script>
export default {
  data() {
    return {
      data: [],
      menusData: [],
      questionTypes: [],
      options: {
        qu1: "",
        qu2: "",
        qu3: "",
        qu4: "",
        qu5: "",
        flag: "true",
      },
    };
  },
  //钩子函数
  created() {
    // console.log(this.$route.params.data);
    this.data = this.$route.params.data;
    this.findAll();
    // console.log(this.data);
    this.selectQuestionTypes();
  },

  methods: {
    findAll() {
      //console.log("你好");
      //发送axios拿取菜单
      this.$axios
        .get("/api/PaperListController/findAll")
        .then((res) => {
          // console.log(res);
          //menusData
          this.menusData = res.data.data;
          //   console.log(this.menusData);
          //将拿到data类型的数字装换为文字
          for (let index = 0; index < this.menusData.length; index++) {
            // alert(index);
            const element = this.menusData[index];
            if (this.data.papercategory == element.id) {
              this.data.fid = element.category;
              break;
            }
            // console.log(element);
            for (
              let index2 = 0;
              index2 < element.paperCategors.length;
              index2++
            ) {
              const element2 = element.paperCategors[index2];
              // console.log(element2);
              if (this.data.papercategory == element2.id) {
                // alert(element2.id);
                this.data.papercategory = element2.category;
                this.data.fid = element.category;
                break;
              }
            }
          }
          console.log(this.data);
        })
        .catch(() => {});
    },
    selectQuestionTypes() {
      this.$axios
        .get("/api/questionTypesController/find")
        .then((res) => {
          // console.log(res);
          //查询出所有题型
          this.questionTypes = res.data.data;
          //   console.log(this.questionTypes);
          //看这套试卷中有哪些题型
          let arr = [];
          for (let index = 0; index < this.data.paperObjects.length; index++) {
            for (let i = 0; i < this.questionTypes.length; i++) {
              //   const element = this.questionTypes[i];
              if (
                this.data.paperObjects[index].quTypeId ==
                this.questionTypes[i].id
              ) {
                arr.push(this.questionTypes[i]);
              }
            }
          }
          this.questionTypes = arr;
          //   console.log(this.questionTypes);
          for (let index = 0; index < this.questionTypes.length; index++) {
            const element = this.questionTypes[index].id;
            if (element == 1) {
              this.options.qu1 = true;
              this.options.flag = false;
            }
            if (element == 2) {
              this.options.qu2 = true;
              this.options.flag = false;
            }
            if (element == 3) {
              this.options.qu3 = true;
              this.options.flag = false;
            }
            if (element == 4) {
              this.options.qu4 = true;
              this.options.flag = false;
            }
            if (element == 5) {
              this.options.qu5 = true;
              this.options.flag = false;
            }
          }
          //   console.log(this.options);
        })
        .catch(() => {});
    },
    //返回前一页
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>